<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue@3"></script>
    <title>第四次作业一</title>
</head>
<body>


<div id="app">
    商品：<input v-model="commodity"><br>
    数量：<input v-model="count" ><br>
    价格：<input v-model="price"><br>
    <button @click="clickBut()">添加到购物车</button>

    <ul>
        <li v-for="i in shopping_trolley">
            {{i.commodity}}的数量是{{i.count}},单价是 {{i.price}},小计{{i.count * i.price}}
        </li>
    </ul>

</div>

<script>
    const {createApp} = Vue

    createApp({
        data() {
            return {
                shopping_trolley: [
                    {commodity: "牙刷", count: 5, price: 10},
                    {commodity: "牙膏", count: 2, price: 20},
                    {commodity: "镜子", count: 3, price: 30},
                ],
                commodity: "",
                count: 0,
                price: 0,
            }

        },
        methods: {
            clickBut: function () {
                const temp = {commodity: this.commodity, count: this.count, price: this.price}
                this.shopping_trolley.push(temp)
                console.log(this.shopping_trolley)
            },

        }
    }).mount('#app')
</script>
</body>
</html>